<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家用电器分类</title>

    <style>
    *{margin: 0;padding: 0}       /*这是设置html中的margin内边距以及padding外边距全部消除，来达到不同浏览器的兼容性*/

        .category{border: 1px;
         width: 300px; height: 396px;
            margin: 0 auto 0;
            border-radius: 10px;
        }

        .category .title{font-size: 19px;
                           font-family: 新宋体;
                           color: white;
                          background: linear-gradient(to bottom, #0467ac, #63a7d6, #b6dbf5);
                           height: 31px;
                          line-height: 29px;
                          text-indent: 17px;
                           border-radius: 56px;
                           }
                           .category dl{border: 2px solid red;   /*把每一个dl都做成一个盒子来表示*/
                           width: 280px; /*设置dl元素宽度*/
                           margin: 5px auto;/*设置dl外边框  上下5px 左右自动计算*/
                                          }

                           .category .sub-title{  background: #b6dbf5;
                                                     border-radius: 10px;
                                                     height: 30px;
                                                     text-indent: 20px;
                                                     font:normal bold 14px/30px "宋体";/*font:字体样式 字体粗细 字体大小/行高 字体类型*/

                                                   }

                                              .category a{text-decoration: none;
                                                color: #0565c6;
                                                  font-size: 14px;

                                                 }

                                       .category p a:hover{
                                               text-decoration:underline;/*设置p里面超链接下划线*/
                                                   color: #F60;     }/*设置p里面超链接文本颜色为#F60*/






    </style>

</head>
<body>
<div class="category">
    <h1 class="title"> 家用电器</h1>
    <dl>
        <dt class="sub-title"><a href="#">大家电</a></dt>
        <dd>
            <p><a href="#">平板电视</a>&nbsp;&nbsp;<a href="#">洗衣机</a>&nbsp;&nbsp;<a href="#">冰箱</a><br/>
                <span>&nbsp;&nbsp;</span><a href="#">空调</a>&nbsp;&nbsp;<a href="#">烟机/灶具</a>&nbsp;&nbsp;<a
                        href="#">热水器</a><br/>
                <span>&nbsp;&nbsp;</span><a href="#">冷柜/酒柜</a>&nbsp;&nbsp;<a href="#">消毒柜</a>&nbsp;&nbsp;<a href="#">家庭影院</a>
            </p>
        </dd>
    </dl>
    <dl>
        <dt class="sub-title"><a href="#">生活电器</a></dt>
        <dd>
            <p><a href="#">电风扇</a>&nbsp;&nbsp;<a href="#">净化器</a>&nbsp;&nbsp;<a href="#">吸尘器</a><br/>
                <span>&nbsp;&nbsp;</span><a href="#">净水设备</a>&nbsp;&nbsp;<a href="#">挂烫机</a>&nbsp;&nbsp;<a
                        href="#">电话机</a>
            </p>
        </dd>
    </dl>

    <dl>
        <dt class="sub-title"><a href="#">厨房电器</a></dt>
        <dd>
            <p><a href="#">榨汁机</a>&nbsp;&nbsp;<a href="#">电压力锅</a>&nbsp;&nbsp;<a href="#">电饭煲</a><br/>
                <span>&nbsp;&nbsp;</span><a href="#">豆浆机</a>&nbsp;&nbsp;<a href="#">微波炉</a>&nbsp;&nbsp;<a
                        href="#">电磁炉</a>
            </p>
        </dd>
    </dl>

    <dl>
        <dt class="sub-title"><a href="#">五金家装</a></dt>
        <dd>
            <p><a href="#">淋浴/水槽</a>&nbsp;&nbsp;<a href="#">电动工具</a>&nbsp;&nbsp;<a href="#">手动工具</a><br/>
                <span>&nbsp;&nbsp;</span><a href="#">仪器仪表</a>&nbsp;&nbsp;<a href="#">浴霸/排气</a>&nbsp;&nbsp;<a
                        href="#">灯具</a>
            </p>
        </dd>
    </dl>
</div>
</body>
</html>
